Alert and Popup modal, transparancy, color and blur changes

Today, I am going to post some thing on Popup custom settings. We can change some properties like Popup modal, transparency, color and Blur.

These properties are of style. This has been a very long avaited request from my designer friends. (especially by : Mandu)

In flex ‘<Application />’ tag has mainly four attributes related to modal properties of pop-ups.

1. modalTransparency
2. modalTransparencyBlur
3. modalTransparencyColor
4. modalTransparencyDuration

Their default values are “0.5”, “3”, “0xDDDDDD” and “100” respectively. Changes to these properties are applicable to entire application level.

But, we can do same changes to separate components too. ( As I have shown in my example.)

Let me show… in image (1) We can see the default Alert / Popup window of flex

and in image (2) We can see the customized Alert / Popup window

and in example I have given other two options too check them.

Ya ya, you guys are more eager to see the code. Go ahead…

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
 pageTitle="Alert / Popup / Modal Example : Mayur Rami"
 modalTransparency="0.5"
 modalTransparencyBlur="3"
 modalTransparencyColor="0xDDDDDD"
 modalTransparencyDuration="100" >

<mx:Script>
 <!&#91;CDATA&#91;

import mx.containers.TitleWindow;
 import mx.managers.PopUpManager;
 import mx.core.IFlexDisplayObject;
 import mx.controls.Alert;

private function openPopup(eve:MouseEvent):void
 {
 var titleWin:TitleWindow = new TitleWindow();

titleWin.width = 250;
 titleWin.height = 150;
 titleWin.showCloseButton = true;
 titleWin.addEventListener("close",removePopup);

switch (eve.target.label)
 {
 case 'Pink popup' :
 titleWin.title = "Pink Window";
 titleWin.setStyle("modalTrasparancy",1);
 titleWin.setStyle("modalTransparencyBlur",100);
 titleWin.setStyle("modalTransparencyColor",0xff6789);
 titleWin.setStyle("modalTransparencyDuration",2500);
 break;
 case "Green popup" :
 titleWin.title = "Green Window";
 titleWin.setStyle("modalTrasparancy",0.2);
 titleWin.setStyle("modalTransparencyBlur",5);
 titleWin.setStyle("modalTransparencyColor",0x00ff67);
 titleWin.setStyle("modalTransparencyDuration",1500);
 break;
 case 'Quick popup' :
 titleWin.title = "Quick Window";
 titleWin.setStyle("modalTrasparancy",0.1);
 titleWin.setStyle("modalTransparencyBlur",2);
 titleWin.setStyle("modalTransparencyColor",0xf0f0f0);
 titleWin.setStyle("modalTransparencyDuration",5);
 break;
 }

PopUpManager.addPopUp(titleWin,this,true);
 PopUpManager.centerPopUp(titleWin);

function removePopup():void
 {
 if(titleWin.title.toString() == 'Quick Window' )
{
    titleWin.setStyle("modalTransparencyDuration",5);
}
 else
{
  titleWin.setStyle("modalTransparencyDuration",750);
}

PopUpManager.removePopUp(titleWin);
 }
 }
&#93;&#93;>

</mx:Script>

 <mx:Label text="Experiments with modal popups and same way can be set custom settings for Alert, too." fontWeight="bold" />
 <mx:Button label="Normal Alert" click="mx.controls.Alert.show('Alert !')" />
 <mx:Button id="greenBtn" label="Green popup" click="openPopup(event)" />
 <mx:Button id="pinkBtn" label="Pink popup" click="openPopup(event)" />
 <mx:Button id="quick" label="Quick popup" click="openPopup(event)" />
</mx:Application>

Feel free to share your views regarding this.

Enjoy Flexing… 🙂